<route>
    {
        meta: {
            enabled: false
        }
    }
    </route>

<script>
export default {
    name: 'ComponentExamplePerson',
    props: {},
    data() {
        return {
            content: [
                {
                    id: 3,
                    name: '普通用户',
                    username: 'string',
                    role: null,
                    createTime: '2022-09-05T17:10:08'
                },
                {
                    id: 1,
                    name: '超级管理员',
                    username: 'jgkj',
                    role: 'ROLE_ADMIN',
                    createTime: '2022-09-02T00:00:00'
                }
            ],
            selectionDataList: []
        }
    },
    created() {},
    mounted() {},
    methods: {}
}
</script>

<template>
    <div>
        <page-header title="人员管理">
            <template #content>
                <p>管理员管理</p>
            </template>
        </page-header>
        <page-main title="基础用法" class="demo">
            <el-row>
                <el-button type="primary">主要按钮</el-button>
            </el-row>
            <el-row>
                <search-bar show-more @toggle="searchMore = $event">
                    <el-form :model="search" size="default" label-width="120px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="">
                                    <el-input
                                        v-model="search.name"
                                        placeholder="请输入关键字"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item>
                                    <el-button type="primary">
                                        <template #icon>
                                            <el-icon>
                                                <svg-icon name="ep:search" />
                                            </el-icon>
                                        </template>
                                        搜索
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item
                                    v-auth="'supplay.department.browse'"
                                    label="上传时间"
                                >
                                    <el-select
                                        v-model="search.department_id"
                                        clearable
                                        placeholder="请选择时间"
                                    >
                                        <el-option label="技术部" :value="1" />
                                        <el-option label="设计部" :value="2" />
                                        <el-option label="行政部" :value="3" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </search-bar>
            </el-row>
        </page-main>
        <page-main>
            <batch-action-bar
                :data="dataList"
                :selection-data="selectionDataList"
                @check-all="$refs.table.toggleAllSelection()"
                @check-null="$refs.table.clearSelection()"
            >
                <el-button size="default">批量操作</el-button>
            </batch-action-bar>
            <el-table
                ref="table"
                :data="dataList"
                border
                stripe
                highlight-current-row
                @selection-change="selectionDataList = $event"
            >
                <el-table-column type="selection" width="40" />
                <el-table-column prop="id" label="账号" width="80" />
                <el-table-column prop="usernamne" label="姓名" width="380" />
                <el-table-column prop="name" label="身份" width="380" />
                <el-table-column prop="role" label="角色" width="100" />
                <el-table-column prop="createTime" label="创建时间" width="120" />
                <el-table-column prop="temp" label="操作" width="220">
                    <template #default="scope">
                        <el-button type="text">config </el-button>
                        <el-button type="text">Subscription Alert </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="padding: 10px 0;">
                <!--内边距空一些-->
                <el-pagination
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
                <!--1.page-sizes一般设置为5，10，15，20-->
                <!--1.page-size一般设置为10，即每页10个-->
            </div>
        </page-main>
    </div>
</template>

<style>
.test {
    width: 6px;
    height: 6px;
    background: #52c41a;
    border-radius: 10px;
    opacity: 1;
    margin: auto 5px;
}
</style>
